let tableArr = [{ im: '', number: '1', exam: '考试管理', idea: '意见反馈', handle: '操作方便', time: '2021-2-21', id: 1 },
{ im: '', number: '2', exam: '考试管理', idea: '意见反馈', handle: '操作方便', time: '2021-2-21', id: 2 },
{ im: '', number: '3', exam: '试卷管理', idea: '意见反馈', handle: '操作方便', time: '2021-2-21', id: 3 },
{ im: '', number: '4', exam: '考试管理', idea: '投诉', handle: '操作方便', time: '2021-2-21', id: 4 },
{ im: '', number: '5', exam: '考试管理', idea: '投诉', handle: '操作方便', time: '2021-2-21', id: 5 },
{ im: '', number: '6', exam: '试卷管理', idea: '投诉', handle: '操作方便', time: '2021-2-21', id: 6 },]
let oTbody = document.querySelector('tbody');
let searchCon1 = document.querySelector('.search-con1');
let searchCon2 = document.querySelector('.search-con2');
let searchBtn = document.querySelector('.search-btn');
let oPagination = document.querySelector('.pagination');
let resetBtn = document.querySelector('.reset-btn');
let editNum = document.querySelector('.edit-num');
let editTheme = document.querySelector('.edit-theme');
let editType = document.querySelector('.edit-type');
let editContent = document.querySelector('.edit-content');
let editTime = document.querySelector('.edit-time');
let editBtn = document.querySelector('.edit-btn');
let editImm = document.querySelector('.imm');

let oSelecpage = document.querySelector('.select-page');
let iNow = 1;
let count = 4;
let count1 = 3;
let count2 = 2;
let editId = 0;
let cuu;

function render(arr, x) {
    if (cuu == count) {
        x = count;
    } else if (cuu == count1) {
        x = count1;
    } else if (cuu == count2) {
        x = count2;
    } else {
        x = count;
    }
    let str = '';
    let renderData = arr.slice((iNow - 1) * x, iNow * x);
    for (let i = 0; i < renderData.length; i++) {
        // console.log(tableArr.length);
        str += `
        <tr>
           <td>${renderData[i].im}</td>
           <td>${renderData[i].number}</td>
           <td>${renderData[i].exam}</td>
           <td>${renderData[i].idea}</td>
           <td>${renderData[i].handle}</td>
           <td>${renderData[i].time}</td>
           <td class="td1" data-id="${renderData[i].id}">
           <button data-toggle="modal" data-target="#editModal" class="edit">处理</button>&nbsp;&nbsp;
           <button data-toggle="modal" data-target="#xiangModal">详情</button>
           </td>
       </tr> `
    }
    oTbody.innerHTML = str;

    //分页功能
    let leftPage = `<li>
      <a class="left" href="#" aria-label="Next">
        <span class="left" aria-hidden="true"><span
            class="glyphicon glyphicon-menu-left left"></span></span>
      </a>  
      </li>
      `
    let rightPage = `<li>
      <a class="right" href="#" aria-label="Next">
        <span class="right" aria-hidden="true"><span
            class="glyphicon glyphicon-menu-right right"></span></span>
      </a>
      </li>
      `
    let pageStr = '';
    for (let i = 1; i <= Math.ceil(arr.length / count); i++) {
        if (iNow == i) {
            pageStr += `<li class="active"><a href="#">${i}</a></li>`

        } else {
            pageStr += `<li><a href="#">${i}</a></li>`
        }

    }
    oPagination.innerHTML = leftPage + pageStr + rightPage;

    //编辑
    oTbody.addEventListener('click', function (e) {
        if (e.target.className.includes('edit')) {
            console.log(e.target);
            editNum.value = e.target.parentNode.parentNode.children[1].innerText;
            editTheme.value = e.target.parentNode.parentNode.children[2].innerText;
            editType.value = e.target.parentNode.parentNode.children[3].innerText;
            editContent.value = e.target.parentNode.parentNode.children[4].innerText;
            editTime.value = e.target.parentNode.parentNode.children[5].innerText;
            editId = e.target.parentNode.dataset.id;

        }
    })


    //页码条数
    oSelecpage.addEventListener('click', function () {
        let optStr = oSelecpage.value;
        switch (optStr) {
            case '4条/页':
                cuu = count;
                render(arr, cuu);
                break;
            case '3条/页':
                cuu = count1;
                render(arr, cuu);
                break;
            case '2条/页':
                cuu = count2;
                render(arr, cuu);
                break;
        }
    })
}
render(tableArr, cuu);

//重置
resetBtn.addEventListener('click', function () {
   window.location.href=('../pages/feedback_1.html')
})


//分页
function pageCaa(e) {
    console.log(e.target);
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(tableArr.length / 4)) {
            iNow++;
        }
    } else {//数字键
        iNow = e.target.innerText.trim();
    }
    render(tableArr, cuu);

}
function pageCaa1(e) {
    console.log(e.target);
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(searchArr.length / 4)) {
            iNow++;
        }
    } else {//数字键
        iNow = e.target.innerText.trim();
    }
    render(searchArr, cuu);

}
oPagination.addEventListener('click', pageCaa)
//搜索
let searchArr;
searchBtn.addEventListener('click', function () {
    iNow=1;
    if (searchCon1.value == '' && searchCon2.value == '') {
        console.log(1)
        return;
    }
    searchArr = [];
    let str1 = searchCon1.value;
    let str2 = searchCon2.value;
    for (let i = 0; i < tableArr.length; i++) {
        if (tableArr[i].exam.includes(str1) && tableArr[i].idea.includes(str2)) {
            searchArr.push(tableArr[i]);
        }
        oPagination.removeEventListener('click', pageCaa);
        oPagination.addEventListener('click', pageCaa1)

    }
    if (searchArr.length == 0) {
    } else {
        render(searchArr, cuu);

    }
})
//编辑功能
editBtn.addEventListener('click', function () {
    let json = {
        id: editId,
        im: '',
        number: editNum.value,
        exam: editTheme.value,
        idea: editType.value,
        handle: editContent.value,
        time: editTime.value,

    }
    console.log(json.im);
    for (let i = 0; i < tableArr.length; i++) {
        if (tableArr[i].id == editId) {
            tableArr.splice(i, 1, json);
        }
    }
    render(tableArr, cuu);
})
